<template>
  <div>
    <ul>
      <li v-for="item in date" :key="item.id">
        <a :href="item.html_url">
          <img :src="item.avatar_url" alt="">
        </a>
        <p>{{ item.login }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ListL',
  data() {
    return {
      date: JSON.parse(localStorage.getItem('date')) || []
    }
  },
  watch: {
    date:{
      handler(value){
        localStorage.setItem('date', JSON.stringify(value))
      },
      deep:true
    }
  },
  mounted() {
    this.$bus.$on('date', date => {
      this.date = date
      console.log(this.date);
    })
  },
  beforeDestroy(){
    this.$bus.$off('date')
  }
}
</script>

<style scoped>

ul {
  width: 1300px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}
ul li {
  width: 100px;
  height: 100px;
  background-color: tomato;
  list-style: none;
  margin-top: 50px;
}
ul li img {
  width: 100%;
  height: 100%;
}
</style>